<template>
  <div>
    <div class="movehrad">
      <myhread2></myhread2>
      <myhread></myhread>
    </div>
    <div class="minBox">
      <div class="minBox-cont">
        <div class="cont-test" v-for="item in minArr" :key="item.id">
          <div><img :src="item.shareInfo.img" /></div>
          <div class="txt">{{ item.title }}</div>
          <div class="users">
            <img :src="item.user.avatarurl" />
            <div class="user-name">{{ item.user.nickName }}</div>
            <img
              src="https://p1.meituan.net/moviemachine/5377c2c03dacf20b6e286e3e72dd57911272.png@80q"
            />
            <div class="zhan">{{ item.upCount }}</div>
          </div>
        </div>
        <div class="cont-test" v-for="item in minArr2" :key="item.id">
          <div><img :src="item.shareInfo.img" /></div>
          <div class="txt">{{ item.title }}</div>
          <div class="users">
            <img :src="item.user.avatarurl" />
            <div class="user-name">{{ item.user.nickName }}</div>
            <img
              src="https://p1.meituan.net/moviemachine/5377c2c03dacf20b6e286e3e72dd57911272.png@80q"
            />
            <div class="zhan">{{ item.upCount }}</div>
          </div>
        </div>
      </div>
    </div>
    <router-link to="/minvideo" class="tip-open-app">
      <img src="https://p1.meituan.net/scarlett/87654d5e4e5e057206969c3abb8e09f33151.png" />
      <span>打开App</span>
    </router-link>
  </div>
</template>

<script>
import myconten from "../components/myconten.vue";
import myhread from "../components/myhread.vue";
import myhread2 from "../components/myhread2.vue";
import axios from "axios";
export default {
  components: { myconten, myhread, myhread2 },
  name: "MinVideo",
  data() {
    return {
      minArr: [],
      minArr2:[],
      minArr3:[]
    };
  },
  mounted() {
    axios
      .get(
        "/asgard/asgardapi/sns/common/feed/channel/list.json?uuid=67461EE05A8D11EC9A70EBC29DD60C669516E04386B94B3AA02DF0923DABF341&channelId=4&feedChannelId=105&timestamp=1639295432423"
      )
      .then((rel) => {
        console.log(rel.data.data.feeds);
        this.minArr = rel.data.data.feeds;
      });
      axios
      .get(
        "/asgard/asgardapi/sns/common/feed/channel/list.json?uuid=67461EE05A8D11EC9A70EBC29DD60C669516E04386B94B3AA02DF0923DABF341&channelId=4&feedChannelId=105&timestamp=1639301492534&offset=20")
      .then((rel) => {
        console.log(rel.data.data.feeds);
        this.minArr2 = rel.data.data.feeds;
      });
  },
};
</script>

<style scoped>
.minBox {
  width: 100%;
  margin-bottom: 60px;
}
.minBox .minBox-cont {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.minBox .minBox-cont .cont-test {
  width: 50%;
  height: 300px;
  position: relative;
}
.minBox .minBox-cont .cont-test img {
  width: 185px;
  height: 300px;
}
.minBox .minBox-cont .cont-test .txt {
  position: absolute;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  bottom: 40px;
  left: 5px;
  color: #fff;
  font-size: 15px;
  text-align: center;
}
.minBox .minBox-cont .cont-test .users {
  width: 90%;
  position: absolute;
  bottom: 5px;
  color: #fff;
  display: flex;
  align-items: center;
  bottom: 0.28rem;
  font-size: 13px;
  left: 5px;
}
.user-name{
    margin: 0 .12rem;
    flex: 1;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.minBox .minBox-cont .cont-test .users img {
  width: 21.5px;
  height: 21.5px;
  border-radius: 50%;
}

.tip-open-app {
    position: fixed;
    right: 0;
    bottom: 3.7333333333333334rem;
    width: 2.933333333333333rem;
    height: 1.0133333333333334rem;
    line-height: .76rem;
    z-index: 10;
    opacity: .94;
    background-image: linear-gradient(134deg, #fb3333, #ff5269 75%);
    box-shadow: 0 .05333333333333334rem .10666666666666667rem 0 rgb(160 44 41 / 15%);
    border-radius: .5333333333333333rem 0 0 .5333333333333333rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
#nav a.router-link-active {
  color:#fff;
}

.tip-open-app img {
    width: .5333333333333333rem;
    height: .5333333333333333rem;
}

.tip-open-app span {
    font-size: .37333333333333335rem;
    margin-left: .26666666666666666rem;
}
</style>